<template>
	<div class="footer">
		<div class="w-info">
			<div class="ljy520 art-count">
				<label>
					<Icon type="ios-create" />版本更新：2020年03月05日</label>
				<label>
					<Icon type="ios-clock" />运行天数：{{runDate}}天</label>
				<label>
					<Icon type="md-contact" />访问次数：{{count.accessSum||0}}次</label>
			</div>
			<div class=" ljy520">
				<label>
					<Icon type="ios-paper" />文章总数：{{count.articleSum||0}}篇</label>
				<label>
					<Icon type="md-pricetags" />标签总数：{{count.tagSum||0}}个</label>
				<label>
					<Icon type="ios-folder-open" />分类总数：{{count.categorySum||0}}个</label>
			</div>
			<div class="ypy">
				<a href="https://www.upyun.com/" target="_blank">
					<span>又拍云图片存储服务</span>
					<img src="https://s1.ax1x.com/2020/03/15/83fYDS.png" class="img-logo" /></a>
			</div>
		</div>
		<div class="copyright">
			<p><a href="http://www.beian.miit.gov.cn/" target="_blank">湘ICP备17023371号</a> · 版权所有 © 2018 - 2020</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Footer',
		props: {},
		data: () => {
			return {
				count: {}
			}
		},
		methods: {
			getCount() {
				this.$http.get("/api/count/getCount").then(res => {
					console.log(res)
					this.count = res;
				})
			},
			addAccessLog(){
				this.$http.post("/api/accessLog/add");
			}
			
		},
		created() {
			this.getCount();
			this.addAccessLog();
		},
		computed:{
			runDate(){
				return new Date().getDate() - new Date("2020-03-14").getDate();
			}
		}
		
	}
</script>

<style lang="stylus" scoped>
.footer
	width 100%
	max-width 1200px
	margin 15px auto
	text-align center
	border-radius 10px
	box-shadow: 0 0 0 1px rgba(0,0,0,0.009), 0 2px 15px rgba(0,0,0,0.02)
	margin-bottom: 20px
	overflow: hidden
	font-size 12px
	.w-info
		background #fff
		padding 20px 0 8px
		.ljy520
			label
				padding-left 15px
				.ivu-icon
					padding-right 3px
		.art-count
			padding-bottom 8px
	.copyright
		background: rgba(202, 216, 226, 0.24)
		color: #909090
		font-size: 12px
		border-top: 1px solid #d9e3ea
		padding: 15px
		a
			color: #909090
	.ypy
		display flex
		justify-content center
		a
			display flex
			justify-content center
			align-items center
			width 200px
			span
				color #696969
		.img-logo
			height 30px
</style>
